<template>
  <div>
    <!-- header -->
    <market-header></market-header>
    <!-- main -->
    <div class="container">
      <div class="header">&nbsp;&nbsp;查找结果</div>
      <hr>
      <goods-box v-for="item in goodsList"
                 :key="item._id"
                 :id="item._id"
                 :imgSrc="item.goodsImages[0].url"
                 :imgAlt="item.goodsImages[0].name"
                 :goodsName="item.goodsName"
                 :goodsPrice="item.goodsPrice"
                 :goodsOrigin="item.goodsOrigin"
                 :goodsUser="item.goodsUser"
                 :userImg="userImg">
      </goods-box>
    </div>
    <!-- footer -->
    <market-footer></market-footer>
  </div>
</template>

<script>
import MarketHeader from "@/components/common/MarketHeader"
import MarketFooter from "@/components/common/MarketFooter"
import GoodsBox from "@/components/common/GoodsBox"
export default {
  components: {
    MarketHeader,
    MarketFooter,
    GoodsBox
  },
  data () {
    return {
      goodsList: [],
      userImg: ''
    }
  },
  created () {
    this.$http.post('http://localhost:3000/search', { goodsName: this.$route.query.content }).then(response => {
      let array = response.data.data;
      array.forEach(item => {
        this.goodsList.push(item);
      });
    });
    this.$http.post('http://localhost:3000/userInfo', { username: localStorage.getItem('username') }).then(response => {
      this.userImg = response.data.data.userImg;
    });
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 1060px;
  margin: 100px auto;

  .header {
    color: #f10;
    font-weight: bold;
    padding-bottom: 5px;
  }
}
</style>